<template>
    <b-navbar class="header shadow-sm" toggleable="lg" type="dark" variant="info" fixed="top">
        <b-navbar-brand class="h-title" to="/">WeBlog</b-navbar-brand>
        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
        <b-collapse id="nav-collapse" is-nav>
            <b-navbar-nav class="ml-auto">
                <b-nav-form>
                    <b-form-input onkeydown="if(event.keyCode==13){event.keyCode=0;event.returnValue=false;}" v-if="route" size="sm" class="mr-sm-4 search" placeholder="Search" v-model="tips"></b-form-input>
                </b-nav-form>
                <b-nav-item v-if="!$store.state.login.isUser" @click="$refs.signIn.changeSignIn('open')">登录</b-nav-item>
                <b-nav-item v-if="!$store.state.login.isUser" @click="$refs.signUp.changeSignUp('open')">注册</b-nav-item>
                <router-link v-if="$store.state.login.isUser" to="/personalblog">
                    <img id="photo" :src="$store.state.user.user.avatar" height="32" width="32">
                </router-link>
                <b-dropdown v-if="$store.state.login.isUser" size="sm" id="dropdown-right" variant="info" right class="m-2" >
                    <b-dropdown-item to="/personalblog">个人中心</b-dropdown-item>
                    <b-dropdown-item to="/dashBoard">个人设置</b-dropdown-item>
                    <b-dropdown-item to="/editor">博客创作</b-dropdown-item>
                    <b-dropdown-divider></b-dropdown-divider>
                    <b-dropdown-item @click="signOut()">退出登陆</b-dropdown-item>
                </b-dropdown>
            </b-navbar-nav>
        </b-collapse>
        <!-- 登录弹窗 -->
        <sign-in ref="signIn" @onChange="changeModal($event)"></sign-in>
        <!-- 注册弹窗 -->
        <sign-up ref="signUp" @onChange="changeModal($event)"></sign-up>
    </b-navbar>
</template>

<script>
import SignIn from '@/components/common/SignIn';
import SignUp from '@/components/common/SignUp';
import store from '@/store/index.js';
import Axios from 'axios';
import { signOut } from '@/../api/api.js'

export default {
    components: {
        SignIn,
        SignUp
    },
    data() {
        return {
            isUser: false,
            tips:"",
        }
    },
    methods: {
        changeModal(nowModal) {
            if(nowModal) {
                this.$refs['signIn'].changeSignIn('close');
                this.$refs['signUp'].changeSignUp('open');
            }
            else {
                this.$refs["signUp"].changeSignUp('close');
                this.$refs['signIn'].changeSignIn('open');
            }  
        },
        signOut() {
            Axios.get(signOut)
            .then(Response => {
                if (Response.data.message == 'success') {
                    store.commit('updateUser',null);
                    store.commit('updateIsUser');
                    this.$router.push({ path:'/'})
                }
            })
            .catch(err => {
                console.log(err);
            });
        }
    },
    computed: {
        route() {
            if (this.$route.name != 'Home') {
                return false;
            }
            else {
                return true;
            }
        }
    },
    watch: {
        user(newValue,oldValue) {
            this.isUser = true;
            this.user = newValue;
        },
        tips(newValue,oldValue) {
            this.$parent.tips = newValue;
        }
    }
}
</script>

<style lang="stylus" scoped>
.header
    padding 12px 24px
    z-index 99
.h-title
    font-size 22px
    font-weight 700
.search
    width 180px
#photo
    border-radius 50%
</style>